<template>
  <div>
    <!--页面主体-->
    <div class="guideBox" v-show="canvasShow">
      <div class="title">录制视频</div>
      <div class="actionBox">
        <div class="imgBox">
          <!-- <img src="../../../static/images/person_face.gif"> -->
        </div>
      </div>
      <div class="desc">
        <p>点击下方按钮录制1-2秒视频</p>
        <p><span>视频中需进行「多次眨眼」的动作</span></p>
      </div>
      <div class="buttonBox">
        <div class="buttonInnerBox">
          <div>
            <button class="uploadButton" :disabled="loading" type="primary">
              开始录制
            </button>
            <input accept="video/*" type="file" capture="user" class="uploadInput" :disabled="loading" @change="handleChange">
          </div>
        </div>
      </div>
    </div>
    <!--成功视图-->
	<view v-show="successShow">
	<view class="authentication_header" style="color: #ff0000;">人脸扫描成功 …… 您可回到继续操作！</view>	
		 <button type="primary" size="medium" @click="toClose">确定</button>
	</view>
	
	<!-- 失败视图 -->
	<view v-show="errorShow">
	<view class="authentication_header" style="color: #ff0000;">人脸扫描失败 …… 请重新操作！</view>	
		 <button type="primary" size="medium" @click="toClose">确定</button>
	</view>
   
  </div>
</template>

<script>

import {getQueryObject} from "@/utils";
import {toSetQrScanned} from "@/api/ec/person/user/qrCode";
import {companyCerFace, personCerFace} from "@/api/ec/person/certification/info";

export default {
  name: 'PersonCertificationFace',
  data() {
    return {
	  loading:false,
      // 地址栏参数
      urlQuery: getQueryObject(window.location.href),
      // 手写板隐藏显示
      canvasShow: true,
      // 成功视图隐藏显示
      successShow: false,
      // 失败视图隐藏显示
      errorShow: false
    }
  },
  created() {
    /** 标记二维码已扫描状态 */
    toSetQrScanned(this.urlQuery);
  },
  methods: {
    /** 录制视频 */
    handleChange(event) {
      const files = event.target.files;
      if (files && files.length > 0) {
        let file = files[0];
        if (file.size > 10 * 1024 * 1024) {
          this.$modal.msgError("视频大于15M，请重新上传！");
          return;
        }
        const formData = new FormData();
        formData.append("faceFile", files[0]);
        formData.append("staffId", this.urlQuery.staffId);
        formData.append("name", this.urlQuery.name);
        formData.append("idNumber", this.urlQuery.idNumber);
        formData.append("mobile", this.urlQuery.mobile);
        formData.append("verifyCode", this.urlQuery.verifyCode);
        // 处理接口
        let url;
        // 认证类型 0 个人实名认证刷脸，1 法人实人认证刷脸
        let verifyType = this.urlQuery.verifyType;
        if (verifyType == 1) {
          // 1 法人实人认证刷脸
          formData.append("companyId", this.urlQuery.companyId);
          formData.append("dirName", "legalFace");
		  uni.showLoading({
		  	title:'认证中'
		  })
          companyCerFace(formData).then(response => {
			uni.hideLoading()
            this.canvasShow = false;
            this.successShow = true;
            this.errorShow = false;
          }).catch(() => {
            uni.hideLoading()
            this.canvasShow = false;
            this.successShow = false;
            this.errorShow = true;
          });
        } else {
          // 0 个人实名认证刷脸
          formData.append("dirName", "personFace");
          uni.showLoading({
          	title:'认证中'
          })
          personCerFace(formData).then(response => {
            this.canvasShow = false;
            this.successShow = true;
            this.errorShow = false;
          }).catch(() => {
            this.canvasShow = false;
            this.successShow = false;
            this.errorShow = true;
          });
        }
      } else {
        this.$modal.msgWarning("请重新上传视频!");
      }
    },
    /** 关闭当前页面 */
    toClose() {
      if (/MicroMessenger/.test(window.navigator.userAgent)) {
        window.WeixinJSBridge.call('closeWindow')
      }
      if (/AlipayClient/.test(window.navigator.userAgent)) {
        window.AlipayJSBridge.call('closeWebview')
      } else {
        window.close();
      }
    }
  }
}
</script>

<style lang='scss' scoped>
	.authentication_header {
	  margin-top:40rpx;
	  padding:14rpx 16rpx;
	  background-color: #edf7f1;
	  font-size: 28rpx;
	}
	page{
		background-color: $uni-bg-color;
		overflow: hidden;
	}
.guideBox {
  text-align: center;
  position: relative;
}

.guideBox .title {
  color: #333;
  font-size: 40rpx;
  font-weight: 700;
  margin: 30rpx 0px;
}

.guideBox .actionBox {
  margin-top:20rpx;
}

.guideBox .actionBox .imgBox {
  width:664rpx;
  height:772rpx;
  text-align: center;
  margin: 0 auto;
}

.guideBox .actionBox .imgBox img {
  height: 100%;
  width: 100%;
}

.guideBox .desc {
  text-align: center;
  font-size: 40rpx;
  font-weight: bolder;
  margin-bottom: 20rpx;
  margin-top: 40rpx;
  color: #0975E0 !important;
}

.guideBox .desc p {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.guideBox .desc span {
  font-size: 32rpx;
  font-weight: 400;
  color: #333;
}

.guideBox .buttonBox {
  position: fixed;
  bottom:64rpx;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
  height: 176rpx;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding:48rpx 56rpx;
}

.guideBox .buttonBox .buttonInnerBox {
  width: 100%;
  height: 80rpx;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.guideBox .buttonBox .uploadButton {
  width: 100%;
  height: 80rpx;
  border-radius: 8rpx;
  font-size:36rpx;
  color: #fff;
  font-weight: 700;
  background: $uni-color-primary;
  border: none;
  display: inline-block;
  line-height: 80rpx;
  white-space: nowrap;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: .1s;
}

.guideBox .buttonBox .uploadInput {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
